<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                
                <el-form-item label="内容名称" prop="tiitle">
                  <el-input v-model="ruleForm.tiitle" placeholder="内容名称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="类型" prop="type" class="mdkpdk11">
                  <el-select v-model="ruleForm.type" placeholder="选择类型" style="width: 400px;" :disabled="onlyLook==1">
                      <el-option  label="请选择类型" value=""> </el-option>
                      <el-option v-for="dt in types" :key="dt" :label="dt" :value="dt"> </el-option>
                      <!-- <el-option  label="关于我们" value="aboutus"> </el-option>
                      <el-option  label="协议" value="agreement"> </el-option>
                      <el-option  label="简介" value="introduce"> </el-option> -->
                  </el-select>
                </el-form-item>

                

                <el-form-item label="金币奖励数量" prop="awardAmount">
                  <el-input v-model="ruleForm.awardAmount" placeholder="金币奖励数量"  style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item v-if="ruleForm.type=='introduce'" label="上传视频" prop="">
                  <upload-file v-if="!id || details" :limit="10" type="video" v-model="intrVideos" :disabled="onlyLook==1"/>
                </el-form-item>
                
                <el-form-item v-else label="内容描述" prop="content" class="mdkpdk22">
                   <WangEditor v-if="!id || details" v-model='ruleForm.content' :disabled="onlyLook==1"></WangEditor>
                </el-form-item>

                <el-form-item label="内容封面" prop="articleCoverPhoto">
                  <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.articleCoverPhoto" :disabled="onlyLook==1"/>
                </el-form-item>
                
                
                <el-form-item>
                    <template v-if="onlyLook==1">
                          <my-back type="info">返回</my-back>
                          <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                      </template>
                      <template v-else>
                          <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="handleSave('ruleForm')">保存</el-button>
                          <my-back icon="el-icon-close">取消</my-back>
                      </template>
                </el-form-item>
            </el-form>
        </mian-layout>
</template>

<script>
import {
  add_article,
  get_article_detail,
  edit_article,
  get_article_type_list
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import {mergeObject,checkMobile} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import WangEditor from '@/components/public/WangEditor';
export default {
  name: '',
  components:{
    uploadFile,
    myBack,
    WangEditor
  },
  data() {
    return {
      ruleForm: {
        tiitle:'',
        awardAmount:'',
        content:'',
        type:'',
        articleCoverPhoto:''
      },
      checked:false,
      rules: {},
      id:'',
      onlyLook:'',
      btnLoading:false,
      details:'',
      types:[],
      intrVideos:[]
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    this.getTypes()
    if(this.id){  // 编辑、查看
      const res = await get_article_detail({articleId:this.id})
      this.details = res
      if(res){
        this.ruleForm = mergeObject(this.ruleForm,res)
        this.ruleForm.awardAmount=res.awardAmount?res.awardAmount.num:''
        if(res.type == 'introduce'){
          this.intrVideos = JSON.parse(res.content)
        }
      }
    }
  },
  methods: {
    getTypes(){
      get_article_type_list().then(res =>{
        this.types = res
      })
    },
    // 确定
    handleSave(formName) {

        if(!this.ruleForm.tiitle){
          return this.$message.warning('请输入内容名称')
        }else if(!this.ruleForm.type){
          return this.$message.warning('请选择类型')
        }else if(!this.ruleForm.awardAmount){
          return this.$message.warning('请输入金币奖励数量')
        }else if(this.ruleForm.type == 'introduce' && this.intrVideos.length<1){
          return this.$message.warning('请输入上传视频介绍')
        }else if(this.ruleForm.type != 'introduce' && !this.ruleForm.content){
          return this.$message.warning('请输入内容描述')
        }
        if(this.ruleForm.type == 'introduce'){
          this.ruleForm.content = JSON.stringify(this.intrVideos)
        }
        //this.btnLoading = true
        if(this.id) {
          edit_article({articleId:this.id,...this.ruleForm}).then(res=>{
              if(res.success){
                  this.$message.success('修改成功！')
                  this.$store.dispatch('tagsView/myClosePageTab',this.$route)
                  //this.$router.back()
              }else{
                  //this.$message.error("修改失败")
              }
              this.btnLoading = false
          })
        }else{
          add_article(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('创建成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("新增失败")
            }
            this.btnLoading = false
          })
        }
    },
  }
}
</script>

<style lang="scss" scoped>
  .uploadimgbox{
    display: flex;
    .upItem{
      p{
        color: #999;
      }
      &+.upItem{
        margin: 0 0 0 103px;
      }
    }
  }
</style>
<style lang="scss">
  .mdkpdk11 .el-form-item__content{
    z-index: 50000;
  }
  .mdkpdk22 .el-form-item__content{
    z-index: 10;
  }
</style>


